<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>在线绘制流程</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/diagram-js.css"/>
    <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css"/>
    <link rel="stylesheet" href="css/app.css"/>

    <style>
        .item {
            display: none;
            cursor: pointer;
        }

        .bjs-powered-by {
            display: none;
        }

        .buttons > li {
            /* display: inline-block; */
            margin-right: 10px;
            height: 26px;
            line-height: 26px;
            float: left;
        }

        .buttons > li > a.btn {
            background: #00BCD4;
            border: none;
            outline: none;
            padding: 0px 10px;
            color: #fff;
            display: inline-block;
            opacity: 1;
            height: 26px;
            font-size: 14px;
            line-height: 26px;
        }

        .label {
            background: #00BCD4;
            border: none;
            outline: none;
            padding: 0px 10px;
            color: #fff;
            display: inline-block;
            cursor: pointer;
            opacity: 1;
            height: 26px;
            font-size: 14px;
            line-height: 26px;
        }

        .sy-mask {
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, 0.8);
            left: 0;
            top: 0;
            z-index: 1000;
            display: none;
        }

        .sy-alert {
            position: fixed;
            display: none;
            background: #fff;
            border-radius: 5px;
            overflow: hidden;
            width: 300px;
            max-width: 90%;
            max-height: 80%;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 9999
        }

        .sy-alert.animated {
            -webkit-animation-duration: .3s;
            animation-duration: .3s
        }

        .sy-alert .sy-title {
            height: 45px;
            color: #333;
            line-height: 45px;
            font-size: 15px;
            border-bottom: 1px solid #eee;
            padding: 0 12px
        }

        .sy-alert .sy-content {
            padding: 20px;
            text-align: center;
            font-size: 14px;
            line-height: 24px;
            color: #666;
            overflow-y: auto
        }

        .sy-alert .sy-btn {
            height: 50%;
            border-top: 1px solid #eee;
            overflow: hidden
        }

        .sy-alert .sy-btn button {
            float: left;
            border: 0;
            color: #333;
            cursor: pointer;
            background: #fff;
            width: 50%;
            line-height: 45px;
            font-size: 15px;
            text-align: center
        }

        .sy-alert .sy-btn button:nth-child(1) {
            color: #888;
            border-right: 1px solid #eee
        }

        .sy-alert.sy-alert-alert .sy-btn button {
            float: none;
            width: 100%
        }

        .sy-alert.sy-alert-tips {
            text-align: center;
            width: 150px;
            background: rgba(0, 0, 0, 0.7)
        }

        .sy-alert.sy-alert-tips .sy-content {
            padding: 8px;
            color: #fff;
            font-size: 14px
        }

        .sy-alert.sy-alert-model .sy-content {
            text-align: left
        }

        .sy-alert.sy-alert-model .sy-content .form .input-item {
            margin-bottom: 12px;
            position: relative
        }

        .sy-alert.sy-alert-model .sy-content .form .input-item input {
            display: block;
            position: relative;
            width: 100%;
            border: 1px solid #eee;
            padding: 10px
        }

        .sy-alert.sy-alert-model .sy-content .form .input-item .getcode {
            border: 0;
            top: 0;
            right: 0;
            position: absolute;
            background: 0;
            line-height: 37px;
            color: #f60;
            width: 100px;
            text-align: center
        }
    </style>
</head>

<body>
<div class="content with-diagram" id="js-drop-zone">
    <div class="message error">
        <div class="note">
            <p>无法显示bpms2.0</p>
            <div class="details">
                <span>错误详细信息</span>
                <pre></pre>
            </div>
        </div>
    </div>
    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
</div>
<ul class="buttons">
    <li class="item upload">
        <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
            <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
            <label class="label" for="uploadFile">导入</label>
        </form>
    </li>
    <li class="item download">
        <a class="btn" href id="downloadBpmn">导出</a>
    </li>
    <li class="item submit">
        <a class="btn" id="js-download-diagram">
            部署
        </a>
    </li>
</ul>
<div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true"
     id="alert">
    <div class="sy-title">部署流程</div>
    <div class="sy-content">
        确认是否部署该流程
        <!--    <div class="form">-->
        <!--      <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
        <!--    </div>-->
    </div>
    <div class="sy-btn">
        <button id="sure">确定</button>
        <button class="cancel">取消</button>
    </div>
</div>
<div class="sy-mask cancel"></div>
<script src="index.js"></script>
</body>
</html>